import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    ListWrapper,
    ListItem,
    ListItemContent,
    ListItemTitle,
    loadMore
} from '../style.js'
class List extends Component {
    render () {
        return (
            <ListWrapper>
                {
                    this.props.articleList.map((item) => {
                        return (
                            <ListItem key={item.get('id')}>
                                <ListItemTitle>{item.get('title')}</ListItemTitle>
                                <ListItemContent>
                                    {item.get('desc')}
                                </ListItemContent>
                                <img className="ListItemImg" src={item.get('imgUrl')} alt="" />
                            </ListItem>
                        )
                    })
                }
               <loadMore>阅读更多</loadMore>
            </ListWrapper>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        articleList: state.getIn(['home','articleList'])
    }
}
export default connect(mapStateToProps, null)(List)